<template>
  <div class="image-loader-container">
    <img v-if="!everythingDone" class="placeholder" :src="placeholder" alt="" />
    <img @load="handleLoad" :src="src" alt="" :style="{ opacity: originOpacity, transition: `${duration}ms` }" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const $emit = defineEmits(['load'])
const props = defineProps({
  src: {
    type: String,
    required: true
  },
  placeholder: {
    type: String,
    required: true
  },
  duration: {
    type: Number,
    default: 500
  }
})
const originLoaded = ref(false) //  原图是否加载完成
const everythingDone = ref(false) // 是否一切都尘埃落定了
const originOpacity = computed(() => {
  return originLoaded.value ? 1 : 0
})
function handleLoad() {
  originLoaded.value = true
  setTimeout(() => {
    everythingDone.value = true
    $emit('load')
  }, props.duration)
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';

.image-loader-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  img {
    @include self-fill();
    object-fit: cover;
  }

  .placeholder {
    filter: blur(2vw);
  }
}
</style>
